<template>
  <div id="app">
    <div id="top-header">
      <b-navbar toggleable="lg" background="#FFFFFF">
        <b-navbar-brand href="/">You and Me </b-navbar-brand>

        <b-navbar-toggle target="nav-collapse"> </b-navbar-toggle>

        <b-collapse id="nav-collapse" is-nav>
          <b-navbar-nav style="width: 100%; justify-content: center">
            <b-nav-item
              @click="go(item.value, $event)"
              class="my_animate"
              :class="{
                my_animate_active: item.value == navActivce,
                animate__bounceIn: item.value == navActivce,
              }"
              v-for="(item, index) in navItems"
              :key="index"
              ><b>{{ item.text }}</b></b-nav-item
            >
          </b-navbar-nav>
          <b-navbar-nav>
            <div class="search-box">
              <b-navbar background="#FFFFFF">
                <b-form-input
                  style="width: 100%"
                  v-model="searchText"
                  class="mr-sm-2 search-input"
                  placeholder="输入搜索内容"
                ></b-form-input>
                <b-button
                  @click="search()"
                  style="min-width: 60px; margin-left: 8px"
                  variant="outline-success"
                  class="my-2 my-sm-0 search-button"
                  type="submit"
                  >搜索</b-button
                >
              </b-navbar>
            </div>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </div>

    <transition name="fade" mode="out-in">
      <router-view id="body_container"> </router-view>
    </transition>

    <div class="blog-footer">
      <p>欢迎来到我的私人小屋 , 尽情浏览吧~ <br /><a href="#">by @AGang</a></p>
    </div>
     <div class="chat-box">
      <chat-box></chat-box>
    </div>
    <div class="aplayer-box d-none d-lg-block">
      <div id="aplayer" :class="{ showAPlayer: isShowAPlayer }"></div>
      <meting-js
        server="netease"
        type="playlist"
        id="712341663"
        fixed="true"
        autoplay="false"
        loop="all"
        order="random"
        preload="auto"
        list-folded="ture"
        list-max-height="500px"
        lrc-type="1"
      >
      </meting-js>
    </div> -->
  </div>
</template>

<script >
window.οnresize = function () {
  init();
};
window.onload = function () {
  init();
};
</script>
<script>
import ChatBox from "./components/chatAIBox.vue";

export default {
  data() {
    return {
      isShowAPlayer: true,
      navItems: [
        {
          text: "首页",
          value: "",
        },
        {
          text: "我的博客",
          value: "blog",
        },
        {
          text: "照片墙",
          value: "photo",
        },
        {
          text: "留言栏",
          value: "message",
        },
        {
          text: "数字非遗",
          value: "culture",
        },
      ],
      navActivce: "",
      searchText:'',
    };
  },
  components: {
    ChatBox,
  },
  methods: {
    search(){
      this.$router.push("/pressList?searchText="+this.searchText)
    },
    go(val) {
      this.navActivce = val;
      this.$router.push(this.navActivce ? "/" + this.navActivce : "/");
    },
  },
  created(){
    
    ////// APlayer
    // const ap = new APlayer({
    //   container: document.querySelector("#aplayer"),
    //   mini: true,
    //   fixed: true,
    //   audio: [
    //     {
    //       name: "name",
    //       artist: "artist",
    //       url: "url.mp3",
    //       cover: "cover.jpg",
    //     },
    //   ],
    // });
    //////

  },
  mounted() {

    
  },
};
</script>
<style lang="scss" scoped>
@import url("aplayer/dist/APlayer.min.css");
.chat-box {
  z-index: 2;
  position: fixed;
  bottom: 6%;
  // left: 3%;
  right: 3%;
}

.aplayer-box {
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 2;
  box-shadow: var(--box-shadow);
  #aplayer {
    width: 400px;
    transition: all 0.5s;
    transform: scale(0) translateX(-100%);
    &.showAPlayer {
      transform: scale(1) translateX(0%);
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

#app {
  color: #2c3e50;
  background-size: 100% 100%;
  // background: url("./assets/img/acg_background.jpg") no-repeat;
  background-size: cover; //背景不随页面缩放改动
  -webkit-background-size: cover; //兼容缩放
  -o-background-size: cover; //兼容缩放
  background-attachment: fixed;//背景图片位置固定
  background-color: #fdfdfd;
  word-wrap: break-word;
  word-break: normal;
}
html,
body,
* {
  scroll-behavior: smooth !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#top-header {
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: var(--box-shadow);
  background-color: var(--bg-color);
  backdrop-filter: var(--bg-filter-blur);
  .nav-collapse {
    // flex-grow: ;
    justify-content: center;
  }
}
.bg-info {
  /* background: linear-gradient(to right top, #20a162, #45b787); */
  background: #ffffff !important;
}
#nav-collapse {
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
}
.nav-item {
  font-size: 14px;
  margin: 0px 24px;
  position: relative;
  a,
  a:link,
  a:visited,
  a:focus {
    transition: 0.3s;
  }
  a:hover {
    color: var(--font-color-hover) !important;
  }
}
.search-input {
  font-size: 12px !important;
  min-width: 200px;
  max-height: 46px;
}
.search-button {
  max-height: 34px;
  padding: 3px 6px !important;
  font-size: 14px !important;
}

// 鼠标移动导航栏标签上的动画
.my_animate::after {
  content: "";
  display: block;
  /*开始时候下划线的宽度为0*/
  width: 0;
  height: 3px;
  position: absolute;
  left: 0;
  // bottom: -4px;
  background: var(--font-color-hover);
  /*这里我们设定所有改变都有动画效果，可以自己指定样式才有动画效果*/
  transition: all 0.3s ease-in-out;
}
.my_animate:hover::after {
  width: 100%;
}
.my_animate_active::after {
  width: 100%;
  content: "";
  display: block;
  /*开始时候下划线的宽度为0*/
  height: 3px;
  position: absolute;
  left: 0;
  // bottom: -4px;
  background: var(--font-color-active);
  /*这里我们设定所有改变都有动画效果，可以自己指定样式才有动画效果*/
  transition: all 0.3s ease-in-out;
}
.my_animate_active {
  // border-bottom: 3px solid #40a070;
  color: var(--font-color-active) !important;
  a {
    color: var(--font-color-active) !important;
  }
}
//END

// 搜索按钮
.btn-outline-success{
  border-color: var(--font-color-active);
  color:var(--font-color-active);
}
.btn-outline-success:hover{
  border-color: var(--font-color-active);
  background: var(--font-color-hover);
}


#body_container {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
}
.blog-footer {
  z-index: 1 !important;
  position: sticky;
  margin-top: 24px;
  padding: 20px 0;
  color: var(--font-color-default);
  text-align: center;
  border-top: 0.05rem solid #e5e5e5;
  background-color: var(--bg-color);
  backdrop-filter: var(--bg-filter-blur);
  a {
    color: var(--color1);
  }
}



// elementUI分页颜色修改
::v-deep {
  .el-pagination.is-background .el-pager li:not(.disabled):hover {
    // background-color: #fff;   // 进行修改未选中背景和字体
    color: var(--color3);
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: var(--color3);   // 进行修改选中项背景和字体
    color: #fff;
  }
}
</style>
